<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="blogInline" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input
          v-model="blogInline.blogTitle"
          placeholder="产品经理成长手册"
        ></el-input>
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="blogInline.blogType" placeholder="艺术">
          <el-option
            v-for="item in typeList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="开始日期">
        <el-date-picker
          v-model="blogInline.begin"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束日期">
        <el-date-picker
          v-model="blogInline.end"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="resetData">清空</el-button>
      </el-form-item>

       <!-- 新增按钮 -->
    <el-button type="success" @click="addBlog">新增</el-button>
    </el-form>

   
    <!-- 列表 -->
    <el-table :data="this.blogData" border style="width: 100%">
      <el-table-column
        prop="blogTitle"
        label="标题"
        width="200"
        show-overflow-tooltip
      />
      <el-table-column prop="blogType" label="分类" sortable="custom" >
        <template slot-scope="scope">
           <span>{{typeMap[scope.row.blogType]}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="blogImage" label="图片" width="120">
        <template slot-scope="scope">
          <el-image
            style="width: 100%; height: 100px"
            :src="scope.row.blogImage"
            :preview-src-list="[scope.row.blogImage]"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="blogGoods"
        label="点赞数"
        width="50"
        sortable="custom"
      />
      <el-table-column
        prop="blogRead"
        label="阅读数"
        width="50"
        sortable="custom"
      />
      <el-table-column
        prop="blogCollection"
        label="收藏数"
        width="50"
        sortable="custom"
      />
      <el-table-column
        prop="blogComment"
        label="评论数"
        width="50"
        sortable="custom"
      />
      <el-table-column prop="blogSource" label="文章来源" />
      <el-table-column prop="gmtCreate" label="创建时间" sortable="custom" />
      <el-table-column prop="gmtModified" label="修改时间" sortable="custom" />
      <el-table-column
        prop="blogRemark"
        label="备注"
        width="200"
        show-overflow-tooltip
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown>
            <el-button type="primary" size="mini">
              操作
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row.blogId)"
                  >编辑</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="primary"
                  @click="toRead(scope.row.blogId)"
                  >查看</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.blogId)"
                  >删除</el-button
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 添加弹窗 -->
    <el-dialog title="添加" :visible.sync="addDialog">
      <blog-add @closeAddDialog='closeAddDialog(value)' />
    </el-dialog>

     <!-- 阅读弹窗,只查看内容 -->
    <el-dialog title="阅读" :visible.sync="readDialog" width="50%">
      <div v-html="parentBlogData.blogContent" />
    </el-dialog>

    <!-- 修改弹窗  :blog="blog"-->
    <el-dialog title="修改" :visible.sync="updateDialog">
      <blog-update :childBlogData="parentBlogData"   @closeUpdateDialog="closeUpdateDialog(value1)"  />
    </el-dialog>
  </div>
</template>

<script>
import blogApi from "@/api/blog.js";
import typeApi from "@/api/type.js";

//导入页面（组件）
import BlogAdd from './blog-add.vue';
import BlogUpdate from './blog-update.vue';

export default {
  components: {
    BlogAdd,    //注册组件
    BlogUpdate
  },
  data() {
    return {
      typeMap:{},   //map集合，用来使得type的值可以显示中文，最小化性能消耗
      parentBlogData:{},
      typeList: [],
      blogData: [],
      total: 0,
      current: 1,
      size: 5,
      blogInline: {
        blogTitle: "",
        blogType: "",
        begin: "",
        end: "",
      },
      addDialog:false ,   //弹窗
      readDialog:false,
      updateDialog:false,
    };
  },
  created() {
    this.onSubmit();
    this.getAlltype();
    this.getTypeToMap()
  },
  methods: {
    //获取类型封装成map的方法
    getTypeToMap(){
        typeApi.getTypeMap().then(
          response =>{
            this.typeMap = response.data.typeMap
          }
        )
    },
    //新增Blog,打开弹窗，也就是另一个页面
    addBlog() {
      this.addDialog = true
    },
    //关闭弹窗
     closeAddDialog(value) {
        this.addDialog = value  //监听子组件向父组件发消息
        this.onSubmit()
    },
    closeUpdateDialog(value1){
      this.updateDialog = value1  //监听子组件向父组件发消息
        this.onSubmit()
    },
    //清空条件框
    resetData(){
      this.blogInline = {}
      this.onSubmit()
    },
    //获取所有博客类型
    getAlltype() {
      typeApi.getTypeList().then((response) => {
        console.log("response.data.typeList", response.data.typeList);
        this.typeList = response.data.typeList;
      });
    },

    //查询所有数据
    onSubmit() {
      blogApi
        .getBlogList(this.current, this.size, this.blogInline)
        .then((response) => {
          console.log("执行成功", response);
          this.blogData = response.data.records;
          this.total = response.data.total;
        });
      console.log("submit!", this.formInline);
    },

    //编辑
    handleEdit(blogId) {
      blogApi.selectOne(blogId).then(response =>{
        console.log('res',response);
        this.parentBlogData =  response.data.data
        this.updateDialog = true
      }    
      )
    },
    //查看
    toRead(blogId) {
        blogApi.selectOne(blogId).then(response =>{
        console.log('toReadres',response);
        this.parentBlogData = response.data.data
         console.log('parentBlogData',this.parentBlogData);
        this.readDialog = true
      }    
      )
    },
    // 删除
    handleDelete(blogId) {
        blogApi.deleteBlog(blogId).then(
          response =>{
            this.$message({
              message:response.message,
              type:"success"
            })
            this.onSubmit()
          }
        )
    },
    //页面改变
    handleSizeChange(val) {
      //每一页页面数量改变接受值
      //每一页页面数量改变会感知到这个值
      //传给value
      console.log("原本多少条", this.size);
      this.size = val;
      console.log("改变后多少条", this.size);
      this.onSubmit();  //改变之后刷新
    },
    //当前页
    handleCurrentChange(val) {
      //当前页改变会感知到这个值
      //传给value
      this.current = val;
      this.onSubmit();   //改变之后刷新
    },
  },
};
</script>
